/**
 * 顶部导航栏组件
 * 提供统一的页面顶部导航体验
 * 
 * 功能说明：
 * - 支持自定义标题和返回按钮
 * - 可配置状态栏显示
 * - 支持左右两侧自定义内容
 * - 适配移动端交互体验
 * 
 * @author 项目开发团队
 * @version 1.0.0
 */

import React from 'react'
import styles from './index.module.css'

/**
 * 顶部导航栏组件
 * @param {Object} props - 组件属性
 * @param {string} props.title - 导航栏标题
 * @param {boolean} props.showBack - 是否显示返回按钮
 * @param {Function} props.onBack - 返回按钮点击回调
 * @param {React.ReactNode} props.leftContent - 左侧自定义内容
 * @param {React.ReactNode} props.rightContent - 右侧自定义内容
 * @param {boolean} props.showStatusBar - 是否显示状态栏
 * @returns {JSX.Element} 顶部导航栏组件
 */
const TopNavbar = ({ 
  title, 
  showBack = false, 
  onBack, 
  leftContent, 
  rightContent,
  showStatusBar = true 
}) => {
  return (
    <div className={styles.topNavbar}>
      {/* 状态栏区域 - 显示时间、信号、电池等信息 */}
      {showStatusBar && (
        <div className={styles.statusBar}>
          <div className={styles.statusLeft}>12:30</div>
          <div className={styles.statusRight}>
            <span className={styles.signal}>📶</span>
            <span className={styles.wifi}>📶</span>
            <span className={styles.battery}>🔋</span>
          </div>
        </div>
      )}
      
      {/* 导航栏主体区域 */}
      <div className={styles.navbar}>
        {/* 左侧区域 - 返回按钮和自定义内容 */}
        <div className={styles.navLeft}>
          {showBack && (
            <div className={styles.backBtn} onClick={onBack}>
              ←
            </div>
          )}
          {leftContent}
        </div>
        
        {/* 标题区域 - 居中显示页面标题 */}
        <div className={styles.navTitle}>
          {title}
        </div>
        
        {/* 右侧区域 - 自定义内容（如更多按钮、设置等） */}
        <div className={styles.navRight}>
          {rightContent}
        </div>
      </div>
    </div>
  )
}

export default TopNavbar
